<!--绑定角色 -->
<template>
  <div class="detail-index-content">
    <Modal
      v-model="modalValue"
      :title="titleName"
      width="480"
      @on-cancel="cancel"
    >
      <div class="user-main">
        <Row :gutter="30">
          <Col span="24">
            <div class="user-info-content">
              <img :src="echoData.avatarUrl" />
              <div class="real-name">
                <h3>{{ echoData.realName }}</h3>
                <p>{{ echoData.accountStatusName }}</p>
              </div>
            </div>
          </Col>
          <Col span="24">
            <Select v-model="formData.permissionRoleIdList" filterable multiple>
              <Option
                v-for="item in userRole"
                :value="item.permissionRoleId"
                :key="item.permissionRoleId"
                >{{ item.roleName }}</Option
              >
            </Select>
          </Col>
        </Row>
      </div>
      <template #footer>
        <div class="foot-main">
          <Button @click="cancel()">关闭</Button>
          <Button type="primary" :loading="isLoading" @click="handleSubmit()"
            >确认</Button
          >
        </div>
      </template>
    </Modal>
  </div>
</template>

<script type="text/javascript">
import {
  bindUserRole, // 绑定角色
  getRoleList, // 获取角色列表
} from "@/api/system.js";
import util from "@/libs/util";

const companyId = util.cookies.get("companyId");

export default {
  name: "addUpdateCompany",
  components: {},
  props: {
    echoData: {
      type: Object,
      default: () => {},
    },
    isHide: {
      type: Boolean,
      default: false,
    },
    titleName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      formData: {
        userId: "",
        permissionRoleIdList: [],
        companyId:"",
      },
      userRole: [],
      modalValue: false,
      isLoading: false,
    };
  },
  methods: {
    cancel() {
      this.$emit("update:updateIsHide", false);
    },
    async bindUserRoleAction() {
      try {
        console.log(this.$props.echoData, "this.$echoData");
        this.formData.userId = this.$props.echoData.userId;
        this.formData.companyId = this.$props.echoData.companyId;
        this.isLoading = true;
        let data = await bindUserRole(this.formData);
        this.isLoading = false;
        this.$Message.success("角色绑定成功！");
        this.$emit("actionSuccess");
        this.$emit("update:updateIsHide", false);
      } catch (error) {
        this.isLoading = false;
      }
    },
    async getRoleListData() {
      let params = {
        companyId,
      };
      let data = await getRoleList(params);
      this.userRole = data;
    },
    handleSubmit() {
      if (this.formData.permissionRoleIdList.length == 0) {
        return this.$Message.error("请选择需要绑定的角色！");
      }
      this.bindUserRoleAction();
    },
  },
  created() {
    this.formData.permissionRoleIdList = this.$props.echoData.processRoleList.map( o => o.permissionRoleId)
    this.getRoleListData();
    this.modalValue = this.$props.isHide;
  },
};
</script>

<style lang="less" scoped>
.user-info-content {
  width: 100%;
  display: flex;
  padding: 20px 0 20px 20px;
  border-radius: 8px;
  align-items: center;
  background: linear-gradient(
    to bottom,
    rgba(45, 143, 255, 0.1),
    rgba(255, 255, 255, 0)
  );
  margin-bottom: 20px;
  img {
    width: 60px;
    height: 60px;
    border-radius: 60px;
    margin-right: 10px;
  }
  h3 {
    font-weight: normal;
  }
  p {
    color: #999;
  }
}
.foot-main {
  display: flex;
  justify-content: center;
}
</style>
